<template>
  <div class="app-container">
    <!-- 说明 -->
    <section>
      <div>
        <h3>温馨提示</h3>
        <p>1、正确答案已在题目内容里面标红。</p>
        <p>
          2、提交时可只勾选合适错误选项，并手动输入三个错误选项。
        </p>
      </div>
    </section>
    <!-- 题目 -->
    <div class="container">
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="题目编号">
          <div class="line">{{ form.name }}</div>
        </el-form-item>
        <el-form-item label="题目内容">
          <div v-html="form.desc"></div>
        </el-form-item>
        <el-form-item label="正确答案">
          <div class="answer">{{ form.region }}</div>
        </el-form-item>
        <el-form-item label="错误选项">
          <el-checkbox-group v-model="form.type">
            <el-checkbox
              v-for="(items, index) in distracters"
              :label="items"
              :key="index"
          /></el-checkbox-group>
        </el-form-item>
        <el-form-item label="新增错误选项">
          <el-input clearable v-model="addDistracters[0]"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input clearable v-model="addDistracters[1]"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input clearable v-model="addDistracters[2]"></el-input>
        </el-form-item>
        <el-form-item align="center">
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button type="primary" @click="onSubmit2">作废</el-button>
          <el-button type="primary" @click="onSubmit3">跳过</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getList, getTopic } from "@/api/table";
import { getToken } from "@/utils/auth";
export default {
  data() {
    return {
      form: {
        name: null,
        region: null,
        type: [],
        desc: null,
      },
      item_id: null,
      distracters: [], // 错误选项
      content: null, // 原题目
      answer_start_index: null, // 题目开始位置
      answer_end_index: null, // 题目结束位置
      addDistracters: [], // 新增错误选项
    };
  },
  created() {
    // 从审题记录里面接收id
    this.item_id = this.$route.query.item_id;
    this.getList();
  },
  methods: {
    getList() {
      let obj = {
        token: getToken(),
        tel: localStorage.getItem("tel"),
        item_id: this.item_id,
      };
      getList(obj).then((response) => {
        this.form.name = response.item_id;
        this.form.region = response.answer;
        this.distracters = response.data;
        this.content = response.content;
        this.answer_start_index = response.answer_start_index;
        this.answer_end_index = response.answer_end_index;
        this.form.desc = this.replacepos(
          this.content,
          this.answer_start_index,
          this.answer_end_index,
          '<span style="color:red">' + this.form.region + "</span>"
        );
      });
    },
    replacepos(text, start, stop, replacetext) {
      let mystr = text.substring(0, start) + replacetext + text.substring(stop);
      return mystr;
    },
    onSubmit() {
      let option = this.form.type.concat(this.addDistracters);
      let obj = {
        item_id: this.form.name,
        content: this.content,
        answer: this.form.region,
        answer_start_index: this.answer_start_index,
        answer_end_index: this.answer_end_index,
        data: option,
        status: 1,
      };
      if (option.length < 3) {
        this.$message({
          message: "最少选择3个干扰项",
          type: "warning",
        });
      } else {
        getTopic(obj).then((response) => {
          this.$message({
            message: response.result_desc,
            type: "success",
          });
          this.form.type = [];
          this.addDistracters = [];
          if (this.item_id) {
            this.$router.push("tree");
          } else {
            this.getList();
          }
        });
      }
    },
    onSubmit2() {
      let obj = {
        item_id: this.form.name,
        content: this.content,
        answer: this.form.region,
        answer_start_index: this.answer_start_index,
        answer_end_index: this.answer_end_index,
        data: this.distracters,
        status: 2,
      };
      getTopic(obj).then((response) => {
        this.$message({
          message: response.result_desc,
          type: "success",
        });
        this.form.type = [];
        this.addDistracters = [];
        if (this.item_id) {
          this.$router.push("tree");
        } else {
          this.getList();
        }
      });
    },
    onSubmit3() {
      let obj = {
        item_id: this.form.name,
        content: this.content,
        answer: this.form.region,
        answer_start_index: this.answer_start_index,
        answer_end_index: this.answer_end_index,
        data: this.distracters,
        status: 3,
      };
      getTopic(obj).then((response) => {
        this.$message({
          message: response.result_desc,
          type: "success",
        });
        this.form.type = [];
        this.addDistracters = [];
        if (this.item_id) {
          this.$router.push("tree");
        } else {
          this.getList();
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
.app-container {
  min-width: 1200px;
  section {
    width: 64%;
    margin-left: 18%;
    margin-top: 20px;
    display: flex;
    justify-content: start;
    p {
      line-height: 1.5;
      font-size: 13px;
      color: #ff5f57;
    }
  }
  .container {
    width: 70%;
    margin-left: 15%;
    margin-top: 20px;
    .line,
    .answer {
      width: 80px;
      line-height: 30px;
      height: 30px;
      border-bottom: 1px solid #bbb;
      text-align: center;
    }
    .answer {
      width: 100%;
    }
  }
}
</style>